<template>
  <div class="container">
    <div style="text-align:center;">
      <h3>功能区信息修改</h3>
    </div>
    <hr />
    <table>
      <tr>
        <td style="width: 200px;" align="right">
          <span>功能区编号：</span>
        </td>
        <td style="width: 600px;">
          <el-input v-model="areaDetails.id" disabled></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>功能区名称：</span>
        </td>
        <td>
          <el-input v-model="areaDetails.name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>功能区英文名称：</span>
        </td>
        <td>
          <el-input v-model="areaDetails.english_name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>电话：</span>
        </td>
        <td>
          <el-input v-model="areaDetails.telephone"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>描述：</span>
        </td>
        <td>
          <el-input type="textarea" v-model="areaDetails.discription"></el-input>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <el-button type="primary" @click="update">确认</el-button>
          <el-button type="primary">还原</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "Update",
  props: {
    areaDetails: {
      type: Object //组件传过来的功能区详情
    }
  },
  data() {
    return {};
  },
  methods: {
    //返回
    back() {
      this.$emit("closeUpdate", false);
    },
    //修改功能区信息
    update() {
      this.$alert("修改功能区信息", "修改成功", {
        confirmButtonText: "确定",
        callback: action => {
          //打印修改后的数据
          console.log(this.compusDetails);
          //修改成功，返回页面
          this.$emit("closeUpdate", false);
        }
      });
    }
  }
};
</script>

<style scoped>
h3 {
  font-weight: 500;
}
p {
  float: right;
  font-weight: 300;
}
span {
  font-weight: 300;
}
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
tr {
  padding: 10px;
  height: 50px;
  line-height: 50px;
}
</style>
